<template>
  <div class="father">
    <img src="../../assets/logo-mi2.png" />
    <div class="son">
      <div v-for="(v, k) in content" :key="k">{{ v }}</div>
    </div>
    <div class="son2">
      <input placeholder="油烟机" />
      <button>
        <img src="../../assets/搜索.png" style="width: 24px; height: 24px" />
      </button>
    </div>
  </div>
</template>
<script>
import { defineComponent, reactive, toRefs } from "vue";

export default defineComponent({
  name: "NavPart",
  setup() {
    const state = reactive({
      content: [
        "Xiaomi手机",
        "Redmi红米",
        "电视",
        "笔记本",
        "平板",
        "家电",
        "路由器",
        "服务",
        "社区",
      ],
    });

    return {
      ...toRefs(state),
    };
  },
});
</script>

<style lang="scss" scoped>
.father {
  width: 1226px;
  display: flex;
  flex-direction: row;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  img {
    width: 56px;
  }
  .son {
    display: flex;
    flex-direction: row;
    flex: 1;
    justify-content: center;
    align-items: center;
    div {
      margin: 0 10px;
    }
  }
  .son2 {
    display: flex;
    align-items: center;
    input {
      border: 1px solid #e0e0e0;
      outline: 0;
      -webkit-transition: all 0.2s;
      transition: all 0.2s;
      height: 30px;
      padding: 5px 10px;
    }
    button {
      height: 42px;
      width: 40px;
      border: 1px solid #e0e0e0;
      background-color: #ffffff;
    }
  }
}
</style>